<template>
  <div class="security-monitor-container">
    <!-- 页面标题区域 -->
    <div class="page-header-wrapper">
      <div class="page-title-section">
        <h1 class="page-title">安全监控</h1>
        <p class="page-description">实时监控系统安全状态、权限访问和异常行为检测</p>
      </div>
      <div class="page-actions-section">
        <button @click="refreshData" :disabled="loading" class="action-btn primary">
          <i class="fas fa-sync mr-2" :class="{ 'animate-spin': loading }"></i>
          <span>刷新数据</span>
        </button>
        <button @click="toggleAutoRefresh" 
                :class="autoRefresh ? 'action-btn success' : 'action-btn secondary'">
          <i class="fas fa-play mr-2" v-if="!autoRefresh"></i>
          <i class="fas fa-pause mr-2" v-else></i>
          <span>{{ autoRefresh ? '停止自动刷新' : '自动刷新' }}</span>
        </button>
        <button @click="exportSecurityReport" v-permission="'security:export'" class="action-btn info">
          <i class="fas fa-download mr-2"></i>
          <span>导出报告</span>
        </button>
      </div>
    </div>

    <!-- 安全指标统计卡片 -->
    <div class="metrics-section">
      <h2 class="section-title">安全指标概览</h2>
      <div class="metrics-grid">
        <!-- 活跃会话 -->
        <div class="metric-card">
          <div class="metric-header">
            <div class="metric-info">
              <p class="metric-label">活跃会话</p>
              <p class="metric-value">{{ formatNumber(securityStats?.activeSessions) }}</p>
              <p class="metric-desc">当前在线用户</p>
            </div>
            <div class="metric-icon sessions">
              <i class="fas fa-users"></i>
            </div>
          </div>
        </div>

        <!-- 登录失败次数 -->
        <div class="metric-card">
          <div class="metric-header">
            <div class="metric-info">
              <p class="metric-label">登录失败次数</p>
              <p class="metric-value" :class="getFailedLoginsClass()">
                {{ formatNumber(securityStats?.failedLogins) }}
              </p>
              <p class="metric-desc">24小时内</p>
            </div>
            <div class="metric-icon failed-logins">
              <i class="fas fa-exclamation-triangle"></i>
            </div>
          </div>
        </div>

        <!-- 权限检查 -->
        <div class="metric-card">
          <div class="metric-header">
            <div class="metric-info">
              <p class="metric-label">权限检查</p>
              <p class="metric-value">{{ formatNumber(securityStats?.permissionChecks) }}</p>
              <p class="metric-desc">今日总计</p>
            </div>
            <div class="metric-icon permissions">
              <i class="fas fa-shield-alt"></i>
            </div>
          </div>
        </div>

        <!-- 安全等级 -->
        <div class="metric-card">
          <div class="metric-header">
            <div class="metric-info">
              <p class="metric-label">安全等级</p>
              <p class="metric-value" :class="getSecurityLevelClass()">
                {{ getSecurityLevelText() }}
              </p>
              <p class="metric-desc">当前状态</p>
            </div>
            <div class="metric-icon security-level" :class="getSecurityLevelIconClass()">
              <i class="fas fa-shield-check"></i>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 安全事件和IP统计 -->
    <div class="security-analysis-section">
      <div class="analysis-grid">
        <!-- 最近安全事件 -->
        <div class="events-panel">
          <h3 class="panel-title">最近安全事件</h3>
          <div class="events-list">
            <div v-for="event in securityEvents" :key="event.id" class="event-item">
              <div class="event-severity" :class="event.severity">
                <i class="fas fa-circle"></i>
              </div>
              <div class="event-info">
                <div class="event-type">{{ event.type }}</div>
                <div class="event-description">{{ event.description }}</div>
                <div class="event-meta">
                  <span class="event-source">{{ event.source }}</span>
                  <span class="event-time">{{ formatTime(event.timestamp) }}</span>
                </div>
              </div>
              <div class="event-actions">
                <button class="event-action-btn">
                  <i class="fas fa-eye"></i>
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- IP访问统计 -->
        <div class="ip-stats-panel">
          <h3 class="panel-title">IP访问统计</h3>
          <div class="ip-stats-list">
            <div v-for="ipStat in ipStats" :key="ipStat.address" class="ip-stat-item">
              <div class="ip-info">
                <div class="ip-address">{{ ipStat.address }}</div>
                <div class="ip-location">{{ ipStat.location }}</div>
              </div>
              <div class="ip-metrics">
                <div class="ip-requests">{{ formatNumber(ipStat.requests) }} 次</div>
                <div class="ip-status" :class="ipStat.status">{{ getIpStatusText(ipStat.status) }}</div>
              </div>
              <div class="ip-chart">
                <div class="ip-bar" :style="{ width: `${getIpBarWidth(ipStat.requests)}%` }"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 权限访问分析 -->
    <div class="permission-analysis-section">
      <div class="permission-panel">
        <h3 class="panel-title">权限访问分析</h3>
        <div class="permission-stats-grid">
          <div class="permission-stat-card">
            <div class="permission-stat-header">
              <div class="permission-stat-icon allowed">
                <i class="fas fa-check-circle"></i>
              </div>
              <div class="permission-stat-info">
                <div class="permission-stat-label">允许访问</div>
                <div class="permission-stat-value">{{ formatNumber(permissionStats?.allowed) }}</div>
                <div class="permission-stat-change" :class="getChangeClass(permissionStats?.allowedChange)">
                  {{ formatChange(permissionStats?.allowedChange) }}
                </div>
              </div>
            </div>
          </div>

          <div class="permission-stat-card">
            <div class="permission-stat-header">
              <div class="permission-stat-icon denied">
                <i class="fas fa-times-circle"></i>
              </div>
              <div class="permission-stat-info">
                <div class="permission-stat-label">拒绝访问</div>
                <div class="permission-stat-value">{{ formatNumber(permissionStats?.denied) }}</div>
                <div class="permission-stat-change" :class="getChangeClass(permissionStats?.deniedChange)">
                  {{ formatChange(permissionStats?.deniedChange) }}
                </div>
              </div>
            </div>
          </div>

          <div class="permission-stat-card">
            <div class="permission-stat-header">
              <div class="permission-stat-icon suspicious">
                <i class="fas fa-exclamation-circle"></i>
              </div>
              <div class="permission-stat-info">
                <div class="permission-stat-label">异常访问</div>
                <div class="permission-stat-value">{{ formatNumber(permissionStats?.suspicious) }}</div>
                <div class="permission-stat-change">需要关注</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 安全威胁图表 -->
    <div class="threat-analysis-section">
      <div class="threat-panel">
        <div class="panel-header">
          <h3 class="panel-title">威胁趋势分析</h3>
          <div class="time-range-selector">
            <select v-model="threatTimeRange" @change="loadThreatData" class="time-select">
              <option value="1h">最近1小时</option>
              <option value="6h">最近6小时</option>
              <option value="1d">最近1天</option>
              <option value="7d">最近7天</option>
            </select>
          </div>
        </div>
        
        <div class="threat-charts-grid">
          <div class="threat-chart">
            <div class="chart-title">登录失败趋势</div>
            <div class="chart-container">
              <div class="chart-placeholder">
                <i class="fas fa-chart-line chart-icon"></i>
                <p>登录失败趋势图表</p>
              </div>
            </div>
          </div>
          
          <div class="threat-chart">
            <div class="chart-title">权限拒绝趋势</div>
            <div class="chart-container">
              <div class="chart-placeholder">
                <i class="fas fa-chart-bar chart-icon"></i>
                <p>权限拒绝趋势图表</p>
              </div>
            </div>
          </div>
          
          <div class="threat-chart">
            <div class="chart-title">异常IP访问</div>
            <div class="chart-container">
              <div class="chart-placeholder">
                <i class="fas fa-chart-area chart-icon"></i>
                <p>异常IP访问图表</p>
              </div>
            </div>
          </div>
          
          <div class="threat-chart">
            <div class="chart-title">安全评分变化</div>
            <div class="chart-container">
              <div class="chart-placeholder">
                <i class="fas fa-chart-pie chart-icon"></i>
                <p>安全评分变化图表</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 安全建议 -->
    <div class="security-recommendations-section">
      <div class="recommendations-panel">
        <h3 class="panel-title">🛡️ 安全建议</h3>
        <div class="recommendations-grid">
          <div class="recommendation-card" v-for="(recommendation, index) in securityRecommendations" :key="index">
            <div class="recommendation-header">
              <div class="recommendation-icon" :class="recommendation.type">
                <i :class="recommendation.icon"></i>
              </div>
              <div class="recommendation-severity" :class="recommendation.severity">
                {{ getSeverityText(recommendation.severity) }}
              </div>
            </div>
            <div class="recommendation-content">
              <div class="recommendation-title">{{ recommendation.title }}</div>
              <div class="recommendation-description">{{ recommendation.description }}</div>
              <div class="recommendation-action">
                <button class="recommendation-btn">立即处理</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'

// 定义接口
interface SecurityStats {
  activeSessions: number
  failedLogins: number
  permissionChecks: number
  securityLevel: string
}

interface SecurityEvent {
  id: string
  type: string
  description: string
  source: string
  timestamp: string
  severity: string
}

interface IpStat {
  address: string
  location: string
  requests: number
  status: string
}

interface PermissionStats {
  allowed: number
  denied: number
  suspicious: number
  allowedChange: number
  deniedChange: number
}

// 响应式数据
const loading = ref(false)
const autoRefresh = ref(false)
const threatTimeRange = ref('1h')
let refreshTimer: NodeJS.Timeout | null = null

const securityStats = ref<SecurityStats>({
  activeSessions: 142,
  failedLogins: 23,
  permissionChecks: 8745,
  securityLevel: 'NORMAL'
})

const securityEvents = ref<SecurityEvent[]>([
  {
    id: '1',
    type: '失败登录',
    description: '多次尝试错误密码',
    source: '192.168.1.100',
    timestamp: '2025-09-26T23:10:00',
    severity: 'warning'
  },
  {
    id: '2',
    type: '权限提升',
    description: '尝试访问管理员权限',
    source: '192.168.1.101',
    timestamp: '2025-09-26T23:05:00',
    severity: 'high'
  },
  {
    id: '3',
    type: '异常访问',
    description: '非工作时间大量请求',
    source: '10.0.0.50',
    timestamp: '2025-09-26T23:00:00',
    severity: 'medium'
  }
])

const ipStats = ref<IpStat[]>([
  { address: '192.168.1.100', location: '北京', requests: 1234, status: 'normal' },
  { address: '192.168.1.101', location: '上海', requests: 2345, status: 'warning' },
  { address: '10.0.0.50', location: '广州', requests: 3456, status: 'normal' },
  { address: '172.16.0.20', location: '深圳', requests: 1567, status: 'blocked' }
])

const permissionStats = ref<PermissionStats>({
  allowed: 7820,
  denied: 234,
  suspicious: 45,
  allowedChange: 5.2,
  deniedChange: -12.3
})

const securityRecommendations = ref([
  {
    type: 'password',
    icon: 'fas fa-key',
    severity: 'high',
    title: '强化密码策略',
    description: '检测到部分用户使用弱密码，建议启用强密码策略并强制用户更新密码。'
  },
  {
    type: 'session',
    icon: 'fas fa-clock',
    severity: 'medium',
    title: '会话超时设置',
    description: '建议缩短会话超时时间，减少会话劫持风险。'
  },
  {
    type: 'monitoring',
    icon: 'fas fa-eye',
    severity: 'low',
    title: '增强监控规则',
    description: '建议添加更多自动化监控规则，及时发现异常行为。'
  }
])

// 方法
const refreshData = async () => {
  loading.value = true
  try {
    await new Promise(resolve => setTimeout(resolve, 1000))
    ElMessage.success('安全数据刷新成功')
  } catch (error) {
    ElMessage.error('刷新数据失败')
  } finally {
    loading.value = false
  }
}

const toggleAutoRefresh = () => {
  autoRefresh.value = !autoRefresh.value
  if (autoRefresh.value) {
    refreshTimer = setInterval(refreshData, 30000)
  } else {
    if (refreshTimer) {
      clearInterval(refreshTimer)
      refreshTimer = null
    }
  }
}

const exportSecurityReport = async () => {
  try {
    ElMessage.success('安全报告导出成功')
  } catch (error) {
    ElMessage.error('导出失败')
  }
}

const loadThreatData = () => {
  console.log('Loading threat data for:', threatTimeRange.value)
}

const formatNumber = (value: number) => {
  return (value || 0).toLocaleString()
}

const formatTime = (timestamp: string) => {
  return new Date(timestamp).toLocaleString()
}

const formatChange = (change: number) => {
  if (!change) return '0%'
  const sign = change > 0 ? '+' : ''
  return `${sign}${change.toFixed(1)}%`
}

const getFailedLoginsClass = () => {
  const count = securityStats.value?.failedLogins || 0
  if (count > 50) return 'text-red-600'
  if (count > 20) return 'text-yellow-600'
  return 'text-green-600'
}

const getSecurityLevelClass = () => {
  const level = securityStats.value?.securityLevel
  const classes = {
    'NORMAL': 'text-green-600',
    'WARNING': 'text-yellow-600',
    'CRITICAL': 'text-red-600'
  }
  return classes[level as keyof typeof classes] || 'text-gray-600'
}

const getSecurityLevelIconClass = () => {
  const level = securityStats.value?.securityLevel
  const classes = {
    'NORMAL': 'security-normal',
    'WARNING': 'security-warning',
    'CRITICAL': 'security-critical'
  }
  return classes[level as keyof typeof classes] || 'security-unknown'
}

const getSecurityLevelText = () => {
  const level = securityStats.value?.securityLevel
  const texts = {
    'NORMAL': '正常',
    'WARNING': '警告',
    'CRITICAL': '严重'
  }
  return texts[level as keyof typeof texts] || '未知'
}

const getChangeClass = (change: number) => {
  if (!change) return ''
  return change > 0 ? 'text-red-600' : 'text-green-600'
}

const getIpStatusText = (status: string) => {
  const texts = {
    'normal': '正常',
    'warning': '警告',
    'blocked': '已封禁'
  }
  return texts[status as keyof typeof texts] || status
}

const getIpBarWidth = (requests: number) => {
  // ✅ 安全处理：避免空数组导致的Math.max错误
  if (ipStats.value.length === 0) {
    return 0
  }
  const requestCounts = ipStats.value.map(ip => ip.requests || 0)
  const maxRequests = Math.max(...requestCounts)
  return maxRequests > 0 ? (requests / maxRequests) * 100 : 0
}

const getSeverityText = (severity: string) => {
  const texts = {
    'high': '高风险',
    'medium': '中风险',
    'low': '低风险'
  }
  return texts[severity as keyof typeof texts] || severity
}

onMounted(() => {
  refreshData()
})

onUnmounted(() => {
  if (refreshTimer) {
    clearInterval(refreshTimer)
  }
})
</script>

<style scoped>
/* 页面容器 */
.security-monitor-container {
  padding: 2rem;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  min-height: 100vh;
  max-width: 1400px;
  margin: 0 auto;
}

/* 页面标题区域 */
.page-header-wrapper {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 2.5rem;
  margin-bottom: 3rem;
  box-shadow: 
    0 10px 40px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.page-title-section {
  margin-bottom: 2rem;
}

.page-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-description {
  font-size: 1.1rem;
  color: #64748b;
  line-height: 1.6;
}

.page-actions-section {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

/* 按钮样式 */
.action-btn {
  padding: 0.75rem 1.5rem;
  border-radius: 12px;
  border: none;
  font-weight: 500;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
  cursor: pointer;
  color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.action-btn.primary {
  background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);
}

.action-btn.success {
  background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
}

.action-btn.secondary {
  background: linear-gradient(135deg, #a0aec0 0%, #718096 100%);
}

.action-btn.info {
  background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
}

.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* 区块标题 */
.section-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.section-title::before {
  content: '';
  width: 4px;
  height: 2rem;
  background: linear-gradient(to bottom, #f56565, #e53e3e);
  border-radius: 2px;
}

/* 统计卡片区域 */
.metrics-section {
  margin-bottom: 4rem;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.metric-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 
    0 10px 40px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
}

.metric-card:hover {
  transform: translateY(-4px);
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.12),
    0 4px 16px rgba(0, 0, 0, 0.08);
}

.metric-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.metric-info {
  flex: 1;
}

.metric-label {
  font-size: 0.9rem;
  color: #64748b;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.metric-value {
  font-size: 2.5rem;
  font-weight: 700;
  color: #1a202c;
  margin-bottom: 0.25rem;
  line-height: 1;
}

.metric-desc {
  font-size: 0.85rem;
  color: #94a3b8;
}

.metric-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: white;
  margin-left: 1rem;
}

.metric-icon.sessions {
  background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
}

.metric-icon.failed-logins {
  background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);
}

.metric-icon.permissions {
  background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
}

.metric-icon.security-level.security-normal {
  background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
}

.metric-icon.security-level.security-warning {
  background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%);
}

.metric-icon.security-level.security-critical {
  background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);
}

/* 安全分析区域 */
.security-analysis-section {
  margin-bottom: 4rem;
}

.analysis-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}

@media (max-width: 1024px) {
  .analysis-grid {
    grid-template-columns: 1fr;
  }
}

.events-panel,
.ip-stats-panel {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 2.5rem;
  box-shadow: 
    0 10px 40px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.panel-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 2rem;
}

.events-list,
.ip-stats-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.event-item,
.ip-stat-item {
  display: flex;
  align-items: center;
  padding: 1.25rem;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.event-severity {
  width: 1rem;
  height: 1rem;
  margin-right: 1rem;
}

.event-severity.high {
  color: #f56565;
}

.event-severity.warning {
  color: #ed8936;
}

.event-severity.medium {
  color: #4299e1;
}

.event-info {
  flex: 1;
}

.event-type {
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 0.25rem;
}

.event-description {
  color: #64748b;
  margin-bottom: 0.5rem;
}

.event-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.85rem;
  color: #94a3b8;
}

.event-actions {
  margin-left: 1rem;
}

.event-action-btn {
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  border: none;
  background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.event-action-btn:hover {
  transform: scale(1.1);
}

.ip-info {
  flex: 1;
}

.ip-address {
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 0.25rem;
}

.ip-location {
  font-size: 0.85rem;
  color: #64748b;
}

.ip-metrics {
  margin: 0 1rem;
  text-align: right;
}

.ip-requests {
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 0.25rem;
}

.ip-status {
  font-size: 0.85rem;
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
  font-weight: 500;
}

.ip-status.normal {
  background: #d1fae5;
  color: #059669;
}

.ip-status.warning {
  background: #fed7aa;
  color: #ea580c;
}

.ip-status.blocked {
  background: #fecaca;
  color: #dc2626;
}

.ip-chart {
  width: 100px;
  height: 8px;
  background: #f1f5f9;
  border-radius: 4px;
  overflow: hidden;
}

.ip-bar {
  height: 100%;
  background: linear-gradient(90deg, #4299e1, #3182ce);
  border-radius: 4px;
  transition: width 0.6s ease;
}

/* 权限分析区域 */
.permission-analysis-section {
  margin-bottom: 4rem;
}

.permission-panel {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 2.5rem;
  box-shadow: 
    0 10px 40px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.permission-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.permission-stat-card {
  padding: 2rem;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.permission-stat-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.permission-stat-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: white;
}

.permission-stat-icon.allowed {
  background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
}

.permission-stat-icon.denied {
  background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);
}

.permission-stat-icon.suspicious {
  background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%);
}

.permission-stat-info {
  flex: 1;
}

.permission-stat-label {
  font-size: 0.9rem;
  color: #64748b;
  margin-bottom: 0.25rem;
}

.permission-stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: #1a202c;
  margin-bottom: 0.25rem;
}

.permission-stat-change {
  font-size: 0.85rem;
  font-weight: 500;
}

/* 威胁分析区域 */
.threat-analysis-section {
  margin-bottom: 4rem;
}

.threat-panel {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 2.5rem;
  box-shadow: 
    0 10px 40px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #f1f5f9;
}

.time-range-selector .time-select {
  padding: 0.5rem 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: white;
  font-size: 0.9rem;
  color: #4a5568;
}

.threat-charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.threat-chart {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius: 16px;
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.chart-title {
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 1rem;
}

.chart-container {
  height: 200px;
}

.chart-placeholder {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  border: 2px dashed #cbd5e0;
  color: #a0aec0;
}

.chart-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

/* 安全建议区域 */
.security-recommendations-section {
  margin-bottom: 3rem;
}

.recommendations-panel {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 2.5rem;
  box-shadow: 
    0 10px 40px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.recommendations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
}

.recommendation-card {
  padding: 2rem;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
}

.recommendation-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.recommendation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.recommendation-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: white;
}

.recommendation-icon.password {
  background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);
}

.recommendation-icon.session {
  background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%);
}

.recommendation-icon.monitoring {
  background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
}

.recommendation-severity {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

.recommendation-severity.high {
  background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);
  color: #dc2626;
}

.recommendation-severity.medium {
  background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
  color: #ea580c;
}

.recommendation-severity.low {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  color: #059669;
}

.recommendation-content {
  flex: 1;
}

.recommendation-title {
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 0.5rem;
}

.recommendation-description {
  color: #64748b;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.recommendation-action {
  text-align: right;
}

.recommendation-btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
  color: white;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.recommendation-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(66, 153, 225, 0.3);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .security-monitor-container {
    padding: 1rem;
  }
  
  .page-header-wrapper {
    padding: 2rem;
  }
  
  .page-title {
    font-size: 2rem;
  }
  
  .metrics-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .threat-charts-grid {
    grid-template-columns: 1fr;
  }
  
  .recommendations-grid {
    grid-template-columns: 1fr;
  }
}
</style>
